<template>
  <div id="container" ref="containerRef"></div>
  <TeleportContainer :flow-id="flowId" />
</template>

<script setup>
import { ref, onMounted, useTemplateRef } from "vue";

import LogicFlow, { ElementState, LogicFlowUtil } from "@logicflow/core";
import "@logicflow/core/lib/style/index.css";
import {
  Control,
  Menu,
  DndPanel,
  SelectionSelect,
  MiniMap,
} from "@logicflow/extension";
import "@logicflow/extension/lib/style/index.css";
import { register, getTeleport } from "@logicflow/vue-node-registry";
import "@logicflow/core/es/index.css";
import ProgressNode from "./ProgressNode.vue";
const containerRef = useTemplateRef("containerRef");
const renderData = ref({
  // 节点数据
  nodes: [
    {
      id: "21", // 节点ID，需要全局唯一，不传入内部会自动生成一个ID
      type: "rect", // 节点类型，可以传入LogicFlow内置的7种节点类型，也可以注册自定义节点后传入自定义类型
      x: 100, // 节点形状中心在x轴位置
      y: 100, // 节点形状中心在y轴的位置
      text: "节点1", // 节点文本

      properties: {
        // 自定义属性，用于存储需要这个节点携带的信息，可以传入宽高以重设节点的宽高

        width: 80,
        height: 80,
        style: {
          stroke: "blue",
        },
        isPass: "true", //例如：在审批流场景，我们定义某个节点，这个节点通过了，节点为绿色，不通过节点为红色。
      },
    },
    {
      id: "50",
      type: "circle",
      x: 300,
      y: 300,
      text: "圆形节点",
      properties: {
        r: 60,
      },
    },
  ],
  // 边数据
  edges: [
    {
      id: "rect-2-circle", // 边ID，性质与节点ID一样
      type: "polyline", // 边类型
      sourceNodeId: "50", // 起始节点Id
      targetNodeId: "21", // 目标节点Id
    },
  ],
});
const progress = ref(0);
let lf = null;
const TeleportContainer = getTeleport();
const flowId = ref("");
onMounted(() => {
  if (containerRef.value) {
    lf = new LogicFlow({
      container: containerRef.value,
      grid: true,
      // width: 1200, // 不设置宽高，默认为容器宽高
      // height: 600,
      plugins: [Menu, Control, DndPanel, SelectionSelect, MiniMap], // 局部导入插件
      pluginsOptions: {
        miniMap: {
          isShowHeader: false,
          isShowCloseIcon: false,
          headerTitle: "",
          width: 200,
          height: 120,
          isShowEdge: true,
        },
      },
    });

    // 注册自定义 vue 节点
    register(
      {
        type: "custom-vue-node",
        component: ProgressNode,
      },
      lf
    );

    lf.on("graph:rendered", ({ graphModel }) => {
      flowId.value = graphModel.flowId;
    });

    // 拖拽面板组件
    lf.extension.dndPanel.setPatternItems([
      {
        label: "选区",
        icon: "",
        callback: () => {
          lf.extension.selectionSelect.openSelectionSelect();
          lf.once("selection:selected", () => {
            lf.extension.selectionSelect.closeSelectionSelect();
          });
        },
      },
      {
        type: "circle",
        text: "开始",
        label: "开始节点",
        icon: "",
      },
      {
        type: "rect",
        label: "用户任务",
        icon: "",
        className: "important-node",
      },
      {
        type: "rect",
        label: "系统任务",
        icon: "",
        className: "import_icon",
      },
      {
        type: "diamond",
        label: "条件判断",
        icon: "",
      },
      {
        type: "circle",
        text: "结束",
        label: "结束节点",
        icon: "",
      },
    ]);
    lf.on("node:click,edge:click", (data) => {
      console.log(data);
    });

    lf.render(renderData.value);
    // miniMap 放在render之后
    lf.extension.miniMap.show();

    const node1 = lf.addNode({
      id: "vue-node-1",
      type: "custom-vue-node",
      x: 80,
      y: 80,
      properties: {
        progress: 60,
        width: 80,
        height: 80,
      },
    });
    console.log("node1 --->>>", node1);

    const node2 = lf.addNode({
      id: "vue-node-2",
      type: "custom-vue-node",
      x: 360,
      y: 80,
      properties: {
        progress: 60,
        width: 80,
        height: 80,
      },
    });

    setInterval(() => {
      const { properties } = node2.getData();
      console.log("properties.progress --->>>", properties?.progress);
      if ("progress" in properties) {
        const progress = properties?.progress;
        node2.setProperty("progress", (progress + 10) % 100);
      }
    }, 2000);
  }
});
</script>

<style lang="scss" scoped>
#container {
  width: 1000px;
  height: 600px;
  border: 1px solid #ccc;
}
</style>
